import React from 'react';
import AgentStatus from './AgentStatus';
import AgentInforMation from './AgentInforMation';
import './styles/agent_status.less';
import AgentService from '@/modules/Agent';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';

const Logout = styled.div`
	width: 100%;
	height: 51px;
	border-radius: 0px 0px 12px 12px;
	border-top: 1px solid #e9e9ea;
	display: flex;
	:hover {
		background: #f8f8f8;
		p {
			border-top: 0;
		}
	}
`;

const LogoutText = styled.span`
	display: inline-block;
	align-items: center;
    width: 50%;
    text-align: center;
    line-height: 50px;
	font-size: 13px;
	font-weight: 400;
	color: #202020;
`;

const AgentDetails = styled.div`
	padding: 12px 18px 0 18px;
`;

const DividerV = styled.div`
	width: 1px;
	height: 100%;
	background: #e9e9ea;
	margin: 0 10px;
`;

const AgentDetailsCard = () => {
	const { t } = useTranslation();

	const logout = async () => {
		if (AgentService.sessionId) {
			await AgentService.hangup({ code: 200, reason: 'noraml' });
			await AgentService.logout();
		} else {
			await AgentService.logout();
		}
	};

	const changePassword = () => {
		AgentService.showChangePasswordModal();
	}

	return (
		<div
			onClick={e => {
				e.stopPropagation();
			}}
		>
			<AgentDetails>
				<AgentStatus />
				<AgentInforMation fullName={AgentService.user?.fullName || ''} agentName={AgentService.user?.userName} groups={AgentService.checkedGroups} />
			</AgentDetails>
			<Logout>
				<LogoutText onClick={changePassword}>{t('change-password')}</LogoutText>
				<DividerV />
				<LogoutText onClick={logout}>{t('logout')}</LogoutText>
			</Logout>
		</div>
	);
};

export default AgentDetailsCard;
